<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-15 17:04:48
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-11-20 10:24:17
 * @FilePath: \cxl-driving-training\src\components\tab\Index.vue
-->
<template>
    <div class="tab">
        <el-radio-group
            v-model="value"
            @change="
                (res: any) => {
                    value = res
                    emits('change', { label: res })
                }
            "
        >
            <el-radio-button v-for="child in list" :key="child" :label="child" :index="child" />
        </el-radio-group>
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
//从父级接收参数
const props = defineProps(['list', 'modelValue'])
//父级的回调函数
const emits = defineEmits(['change'])

const value = ref('')

watchEffect(() => {
    value.value = props.modelValue ? props.modelValue : props.list[0]
})
</script>

<style scoped>
.tab {
    margin-bottom: 16px;
}
</style>
